<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气泡图</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/patternomaly/1.3.2/patternomaly.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>
<script>
    var ctx = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bubble',
        data: {
            datasets: [{ /*第一组气泡图*/
                label: 'first',
                data: [
                    {'x':10, 'y': 5, 'r': 15}, /*x：x轴距离，y：y轴距离，r：气泡半径(单位：px)*/
                    {'x':5, 'y': 5, 'r': 10},
                    {'x':9, 'y': 15, 'r': 20},
                    {'x':15, 'y': 25, 'r': 9},
                    {'x':25, 'y': 10, 'r': 16}
                ],
                backgroundColor: 'rgba(199,133,200)',
            },{ /*第二组气泡图*/
                label: 'second',
                data: [
                    {'x':12, 'y': 6, 'r': 15},
                    {'x':10, 'y': 5, 'r': 10},
                    {'x':25, 'y': 10, 'r': 20},
                    {'x':5, 'y': 15, 'r': 9},
                    {'x':9, 'y': 20, 'r': 16}
                ],
                backgroundColor: 'rgba(146,208,80)',
            }]
        }
    });
</script>
</body>
</html>